<template>
  <el-row class="row-firends">
    <el-col :span="18">
      <div class="friends">
        <div class="state">
          <span>动态</span>
          <div>
            <el-button
              plain
              round
              size="mini"
              icon="el-icon-edit"
              class="button"
              >发动态</el-button
            >
            <el-button
              plain
              round
              size="mini"
              icon="el-icon-video-camera-solid"
              class="button"
              >发布视频</el-button
            >
          </div>
        </div>
        <div class="friends-content" v-loading="loading">
          <div
            class="user-state-list"
            v-for="(stateList,index) in dynamic"
            :key="index"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled"
            style="overflow: auto"
          >
            <div class="friends-item">
              <div class="dynamic-information">
                <img
                  :src="stateList.user.avatarUrl"
                  alt="加载错误"
                  class="touxiang"
                />
                <div class="dynamic-content">
                  <a href="javascript:;"
                    >{{ stateList.user.nickname }}
                    <img
                      :src="stateList.user.avatarDetail.identityIconUrl"
                      class="ico"
                  /></a>
                  <span>{{ timeFormat(stateList.eventTime) }}</span>
                  <span>{{ JSON.parse(stateList.json).msg }}</span>
                  <div class="picture">
                    <img
                      :src="pic.originUrl"
                      alt="图片加载失败"
                      class="upload-pictures"
                      v-for="(pic, index) in stateList.pics"
                      :key="index"
                    />
                  </div>
                </div>
              </div>
              <div class="forward">
                <span class="el-icon-thumb"
                  >赞 ({{ stateList.info.likedCount }})</span
                >
                <span>转发 ({{ stateList.forwardCount }})</span>
                <span>评论 ({{ stateList.info.commentCount }})</span>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
          <p v-if="isLoading">加载中...</p>
          <p v-if="noMore">没有更多了</p>
        </div>
      </div>
    </el-col>
    <el-col :span="6"
      ><div class="personal-content">
        <div class="person-message">
          <div class="user-touxiang">
            <img src="../../../assets/images/touxiang.jpg" alt="加载错误" />
            <div>
              <span>无名大小996$_</span>
              <span>万事如意</span>
            </div>
          </div>
          <div class="user-follow">
            <span><i>0</i> 动态</span>
            <span><i>15</i> 关注</span>
            <span><i>16</i> 粉丝</span>
          </div>
        </div>
        <div class="star-users">
          <div class="start">
            <span>明星用户</span>
            <span>换一批</span>
          </div>
          <div v-loading="loading" class="laoding-box">
            <div
              class="singer-recommendation"
              v-for="song in songRecommend"
              :key="song.avatarImgId"
            >
              <img :src="song.avatarUrl" alt="加载错误" />
              <div class="singer">
                <span>{{ song.nickname }}</span>
                <p>{{ song.description }}</p>
              </div>
              <span class="follow"><i>+</i>关注</span>
            </div>
          </div>
          <div class="weibo">
            <span>添加微博好友，和他们分享音乐</span>
            <button>绑定新浪微博</button>
          </div>
        </div>
      </div></el-col
    >
    <el-backtop class="backtop"></el-backtop>
  </el-row>
</template>

<script>
export default {
  name: 'FriendsState',
  data() {
    return {
      songRecommend: [],
      dynamic: [],
      loading: true,
      isLoading: false
    }
  },
  async mounted() {
    this.loading = true
    // 尝试promise.all 明星推荐
    const dynamic = this.$API.mock.reqGetDynamic()
    // 动态
    const starRecommendation = this.$API.mock.reqGetStarusers()
    // showLoading()
    const res = await Promise.all([starRecommendation, dynamic]).catch((err) =>
      console.log(err)
    )
    // hideLoading()
    this.songRecommend = Object.freeze(res[0].slice(0, 9))
    this.dynamic = res[1]
    console.log(this.dynamic)
    this.loading = false
  },
  methods: {
    timeFormat: (shape) => {
      let result
      var minute = 1000 * 60
      var hour = minute * 60
      var day = hour * 24
      // var halfamonth = day * 15
      var month = day * 30
      var now = new Date().getTime()
      var diffValue = now - shape
      if (diffValue < 0) {
        return
      }
      var monthC = diffValue / month
      var weekC = diffValue / (7 * day)
      var dayC = diffValue / day
      var hourC = diffValue / hour
      var minC = diffValue / minute
      if (monthC >= 1) {
        result = '' + parseInt(monthC) + '月前'
      } else if (weekC >= 1) {
        result = '' + parseInt(weekC) + '周前'
      } else if (dayC >= 1) {
        result = '' + parseInt(dayC) + '天前'
      } else if (hourC >= 1) {
        result = '' + parseInt(hourC) + '小时前'
      } else if (minC >= 1) {
        result = '' + parseInt(minC) + '分钟前'
      } else result = '刚刚'
      return result
    },
    load() {
      this.isLoading = true
      setTimeout(() => {
        let newList = this.dynamic.slice(0, 4)
        this.dynamic = [...this.dynamic, ...newList]
        this.isLoading = false
      }, 2000)
    }
  },
  computed: {
    noMore() {
      return this.dynamic.length >= 200
    },
    disabled() {
      return this.isLoading || this.noMore
    }
  }
}
</script>

<style  scoped>
.friends-content p{
  text-align: center;
  font-size: 18px;
  color: #999;
  cursor: default;
}
.ico {
  height: 15px;
  width: 15px;
  vertical-align: middle;
}
.backtop {
  color: #242424;
}
.backtop:hover {
  background-color: #fff;
}
.laoding-box {
  height: 525px;
}
.row-firends {
  width: 1000px;
  border: 1px solid #ccc;
  margin: 0 auto;
}
.friends {
  border-right: 1px solid #ccc;
  padding: 20px;
}
.state {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 3px solid #c20c0c;
  padding-bottom: 10px;
}
.state span {
  font-size: 25px;
}
.user-state-list {
  margin-top: 20px;
}
/* 动态具体信息 */

.dynamic-information {
  display: flex;
  /* border: 1px solid red; */
}
.touxiang {
  width: 50px;
  height: 50px;
}
.dynamic-content {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
  margin: 10px;
}
.dynamic-content a {
  font-size: 16px;
  color: #0c73c2;
}
.dynamic-content span {
  margin: 5px 0;
}
.dynamic-content span:first-of-type {
  color: #999;
}
.dynamic-content span:last-of-type {
  font-size: 14px;
}
.picture {
  display: flex;
  max-width: 630px;
  flex-wrap: wrap;
}
.upload-pictures {
  margin-top: 10px;
  max-width: 200px;
  margin-right: 10px;
}
.forward {
  text-align: right;
}
.forward span {
  color: #0c73c2;
  padding: 0 10px;
  border-right: 2px solid #ccc;
}
.forward span:last-of-type {
  border-right: none;
}
.person-message {
  height: 160px;
  background-image: linear-gradient(0deg, #ccc, #fff);
}
.user-touxiang {
  display: flex;
  margin: 25px;
}
.user-touxiang img {
  width: 68px;
  height: 68px;
}
.user-touxiang div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.user-touxiang div span:first-of-type {
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 10px;
  cursor: default;
}
.user-touxiang div span:last-of-type {
  color: #888;
  cursor: default;
}
.user-follow span {
  margin: 10px;
}
.user-follow span:first-of-type {
  margin-left: 25px;
}
.user-follow span i {
  font-size: 25px;
  font-weight: 800;
}
.star-users {
  margin: 20px;
  height: 661px;
}
.start {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}
.star-users div:first-of-type span:first-of-type {
  font-weight: 800;
}
.singer-recommendation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
}
.singer-recommendation img {
  width: 45px;
  height: 45px;
}
.singer {
  display: block;
}
.singer p {
  width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.follow {
  border: 1px solid #ccc;
  padding: 2px 10px;
}
.follow i {
  color: #c20c0c;
  font-size: 16px;
}
.weibo {
  margin: 20px 0;
}
.weibo button {
  width: 100%;
  height: 30px;
  margin: 10px 0;
  background-color: #dfdddd;
  border: 1px solid #ccc;
}
</style>
